import Head from 'next/head';
import TableOptionsTable from '../../../components/prop-tables/TableOptionsTable';
import MenuItemsExample from '../../../examples/row-actions-menu-items';
import ButtonsExample from '../../../examples/row-actions-buttons';

<Head>
  <title>{'Row Actions Guide - Material React Table V3 Docs'}</title>
  <meta
    name="description"
    content="How to add row action buttons to each row in Material React Table"
  />
</Head>

## Row Actions Feature Guide

The row actions feature is simply a pre-built [Display Column](/docs/guides/display-columns) feature that adds a column as a place to store either a row action menu or other row action buttons.

Using the built-in Row Actions column is optional, as you can simply create your own display columns, but this feature has some built-in conveniences that make it easy to add row actions to your table.

### Relevant Table Options

<TableOptionsTable
  onlyOptions={
    new Set([
      'displayColumnDefOptions',
      'enableRowActions',
      'renderRowActionMenuItems',
      'renderRowActions',
      'positionActionsColumn',
    ])
  }
/>

### Enable Row Actions

You can enable the row actions feature by setting the `enableRowActions` table option to `true`.

You can then add your row action components with either the `renderRowActions` or `renderRowActionMenuItems` props.

#### Add Row Actions Menu Items

If you want to embed all of your row actions into a single menu, you can use the `renderRowActionMenuItems` table option.

```jsx
const table = useMaterialReactTable({
  columns,
  data,
  enableRowActions: true,
  renderRowActionMenuItems: ({ row }) => [
    <MenuItem key="edit" onClick={() => console.info('Edit')}>
      Edit
    </MenuItem>,
    <MenuItem key="delete" onClick={() => console.info('Delete')}>
      Delete
    </MenuItem>,
  ],
});

return <MaterialReactTable table={table} />;
```

<MenuItemsExample />

#### Add Row Action Buttons

If you want to add row action buttons, you can use the `renderRowActions` table option.

```jsx
const table = useMaterialReactTable({
  columns,
  data,
  enableRowActions: true,
  renderRowActions: ({ row }) => (
    <Box>
      <IconButton onClick={() => console.info('Edit')}>
        <EditIcon />
      </IconButton>
      <IconButton onClick={() => console.info('Delete')}>
        <DeleteIcon />
      </IconButton>
    </Box>
  ),
});

return <MaterialReactTable table={table} />;
```

<ButtonsExample />

### Customize Row Actions Column

#### Change Row Actions Display Column Options

You can customize all column def options for the row actions column, including the column width, header text, and more using the `displayColumnDefOptions` table option.

```jsx
const table = useMaterialReactTable({
  columns,
  data,
  enableRowActions: true,
  displayColumnDefOptions: {
    'mrt-row-actions': {
      header: 'Change Account Settings', //change header text
      size: 300, //make actions column wider
    },
  },
  renderRowActions: ({ table }) => (
    <Box>
      <Button>Button 1</Button>
      <Button>Button 2</Button>
      <Button>Button 3</Button>
    </Box>
  ),
});
```

#### Position Row Actions Column

You can position the row actions column to the left or right (first or last column) of the table using the `positionActionsColumn` table option. The default is as the first column.

```jsx
const table = useMaterialReactTable({
  columns,
  data,
  enableRowActions: true,
  positionActionsColumn: 'last',
  renderRowActions: ({ table }) => (
    //...
  ),
})
```

View Extra Storybook **[Examples](https://www.material-react-table.dev/?path=/story/features-row-actions-examples)**
